<template>
	<view class="news tn-safe-area-inset-bottom">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed>报名咨询</tn-nav-bar>
		<view style="margin-top: 200rpx;">
			<view class="apply-form">
				<u--form :model="personnelInfo" ref="formInfo" :border-bottom="false" label-width="10px">
					<u-form-item label-position="top" prop="username" ref="username" class="custom-form">
						<view class="dis-flex">
							<view class="title"><span style="color: red;">*</span>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名
							</view>
							<u--input fontSize="30rpx" v-model="personnelInfo.username" :customStyle="customInputStyle"
								placeholder="请输入姓名(必填)" clearable maxlength="5">
							</u--input>
						</view>

					</u-form-item>

					<u-form-item label-position="top" prop="newgender" ref="newgender" class="custom-form"
						@click="showgender">
						<view class="dis-flex">
							<view class="title"><span style="color: red;">*</span>性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别
							</view>
							<u--input fontSize="30rpx" v-model="newgender" disabled :customStyle="customInputStyle"
								placeholder="请选择性别" clearable maxlength="5">
							</u--input>
						</view>
						<!-- <u--input style="width: 600rpx;background-color: red!important;" v-model="newgender" disabled
							disabledColor="#ffffff" placeholder="请选择性别" border="none"></u--input> -->
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>

					<u-form-item label-position="top" prop="idCard" ref="idCard" class="custom-form">
						<view class="dis-flex">
							<view class="title"><span style="color: red;">*</span>身份证号</view>
							<u--input fontSize="30rpx" v-model="personnelInfo.idCard" :customStyle="customInputStyle"
								placeholder="请输入身份证号码(必填)" clearable type="idCard" maxlength="18">
							</u--input>
						</view>

					</u-form-item>
					<u-form-item label-position="top" prop="mobile" ref="mobile" class="custom-form">
						<view class="dis-flex">
							<view class="title"><span style="color: red;">*</span>手&nbsp;&nbsp;机&nbsp;&nbsp;号</view>
							<u--input width="300rpx!important" fontSize="30rpx" v-model="personnelInfo.mobile"
								:customStyle="customInputStyle" placeholder="请输入手机号(必填)" clearable type="idCard"
								maxlength="18">
							</u--input>
						</view>

					</u-form-item>
				</u--form>

				<view class="bottom">
					<u-button type="primary" :disabled="loading" @click="submit" throttle-time="2000"
						v-loading="loading">
						提交{{loading?"中...":""}}
					</u-button>
				</view>

				<u-picker ref="uPicker" title="选择省份" :show="pickShow" :columns="provincesArr" @confirm="confirm"
					@cancel="close"></u-picker>
			</view>

		</view>

		<u-action-sheet :show="isshow" :actions="actions" title="请选择性别" description="" @close="isshow = false"
			@select="genderSelect">
		</u-action-sheet>
		<view class='tn-tabbar-height'></view>
	</view>
</template>

<script>
	export default {
		name: 'News',
		data() {
			return {
				isshow: false,
				personnelInfo: {
					username: "",
					mobile: "",
					idCard: "",
					gender: 0 //性别 0女 1男
				},
				newgender: '男',
				actions: [{
						name: '女',
						value: 0
					},
					{
						name: '男',
						value: 1
					}
				],
				loading: false,
				provincesArr: [],
				rules: {
					username: [
						// {
						// 	message: "请输入正确的姓名",
						// 	trigger: "blur",
						// 	validator: (rule, value, callback) => {
						// 		return RegExp(
						// 			/^[\u4e00-\u9fa5]{1,4}$/
						// 		).test(value)
						// 	},
						// },
						{
							required: true,
							message: '请输入姓名',
							trigger: ['blur', 'change']
						}
					],
					mobile: [{
							validator: (rule, value, callback) => {
								if (value) {
									return this.$u.test.mobile(value);
								} else {
									return true
								}
							},
							message: "手机号格式不正确",
							trigger: "blur"
						},
						{
							required: true,
							message: "手机号码不能为空",
							trigger: "blur"
						}
					],
					idCard: [{
							validator: (rule, value, callback) => {
								return RegExp(
									/^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[0-1])\d{3}([0-9]|X)$/i
								).test(value)
							},
							message: "请输入正确的身份证号码",
							trigger: "blur"
						},
						{

							required: true,
							message: "身份证不能为空",
							trigger: "blur"
						}
					],
					address: [{
						required: true,
						message: "地址不能为空",
						trigger: "blur"
					}],
					province: [{
						required: true,
						message: "省份不能为空",
						trigger: "change"
					}],
					laborServiceCompany: [{
						required: true,
						message: "劳务公司不能为空",
						trigger: "change"
					}],
					type: [{
						required: true,
						message: "类型不能为空",
						trigger: "change"
					}]
				},
			}

		},
		onLoad() {},
		// 这一步很重要
		onReady() {
			this.$refs.formInfo.setRules(this.rules);
		},

		methods: {
			showgender() {
				this.isshow = true
			},
			genderSelect(e) {
				this.personnelInfo.gender = e.value
				this.newgender = e.name
				this.$refs.uForm.validateField('userInfo.gender')
			},
			submit() {
				console.log(this.personnelInfo);
				// this.loading = true
				this.$refs.formInfo.validate().then(valid => {
					if (valid) {
						let _this = this
						let obj = {}
						obj.name = _this.personnelInfo.username
						obj.mobile = _this.personnelInfo.mobile
						obj.mobile = _this.personnelInfo.mobile
						obj.idCard = _this.personnelInfo.idCard
						obj.gender = _this.personnelInfo.gender
						uni.request({
							url: _this.$url + '/index/index/design',
							method: 'POST',
							data: obj,
							success(res) {
								console.log(res.data)
								if (res.data.code == 200) {
									uni.$u.toast('提交成功,即将返回上一页')
									setTimeout(function() {
										uni.navigateBack(1)
									}, 1000)
								}
							}
						})
					} else {
						uni.$u.toast('操作失败！')
					}
				});
			},

		},
		onReachBottom() {}
	}
</script>

<style lang="scss" scoped>
	.dis-flex {
		display: flex;
		align-items: center;

		.title {
			margin-right: 20rpx;
		}

	}

	.news {
		max-height: 100vh;
	}

	.apply-form {
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	/* 底部安全边距 start*/
	.tn-tabbar-height {
		min-height: 120rpx;
		height: calc(140rpx + env(safe-area-inset-bottom) / 2);
		height: calc(140rpx + constant(safe-area-inset-bottom));
	}

	.uni-form-item .title {
		padding: 20rpx 0;
	}

	::v-deep input {
		font-size: 24rpx !important;
	}

	::v-deep .u-input {
		width: 680rpx !important;
	}

	::v-deep .u-action-sheet__description {
		display: none !important;
	}

	.title {
		width: 146rpx;
		font-size: 30rpx;
	}

	::v-deep .u-input {
		width: 540rpx !important;
	}

	::v-deep .item__body__right__content__icon {
		display: none !important;
	}

	/* 文章内容 end*/
</style>